<!--
元素分类--块级元素
-->
<!--
什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
-->
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>块状元素</title>
    <style type="text/css">
        div, p, h1, h2, h3, h4, h5, h6, form, ul, li, a  {
            background: pink;
        }
        /*
        设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
        块级元素特点：
        1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
        2、元素的高度、宽度、行高以及顶和底边距都可设置。
        3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
        */
        a{
            display: block;
        }
    </style>
</head>
<body>
<div style="width:900px;">div1<div style="width:1000px;">内部嵌套div</div></div>
<div style="width:800px;">div2</div>
<p style="width:700px;">段落1段落1段落1段落1段落1</p>
<h1 style="width:100px;">一级标题</h1>
<h2 style="width:200px;">二级标题</h2>
<h3 style="width:300px;">三级标题</h3>
<h4 style="width:400px;">四级标题</h4>
<h5 style="width:500px;">五级标题</h5>
<h6 style="width:600px;">六级标题</h6>
<form style="width:700px;">form表单</form>
<ul style="width:800px;">无符号列表</ul>
<li style="width:900px;">有符号列表</li>
<a style="width:1000px;">锚点</a>
</body>
</html>